import { Button, Carousel, Col, Image, Row } from 'antd';
import React, { useState } from 'react';
import carouselStyle from './styles.less';
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons';
import _ from 'lodash';
import { imageFallbackStr, onMouseOutBtn } from '@/utils';
import { getBaseUrl } from '@/services/urlconst';
let baseUrl = getBaseUrl();
// const baseUrl = 'http://192.168.153.192:31019'; //振豪本地

export const ImageCarousel: React.FC<ImageCarouselAPI.IImageCarousel> = ({ imageStrList, imageRenderDomID, imageHeight = 260, otherProps }) => {
  /** 生成ref */
  const carouselRef: any = React.useRef();

  /** 图片下标 */
  const [carouselIndex, setCarouselIndex] = useState<number>(0);

  return (
    <Row className={carouselStyle['imageCarouselSty']} style={{ height: imageHeight }} {...otherProps}>
      <Col span={4}>
        {imageStrList?.length > 1 && (
          <Button
            onClick={() => {
              carouselRef?.current?.prev();
            }}
            icon={<DoubleLeftOutlined />}
            disabled={carouselIndex == 0}
            type="dashed"
            shape="circle"
            className="imageCarouselSty-leftBtn"
            onMouseOut={onMouseOutBtn}
          />
        )}
      </Col>
      <Col span={16}>
        {/* <Image.PreviewGroup> */}
        {imageStrList?.length > 0 ? (
          <Carousel
            ref={carouselRef}
            afterChange={(current: any) => {
              setCarouselIndex(current);
            }}
          >
            {imageStrList?.map((imageItem: any, imageIndex: any) => {
              return (
                <Image
                  key={`${imageIndex}${Math.random()}`}
                  width={'100%'}
                  height={imageHeight}
                  src={baseUrl + imageItem}
                  // src={imageItem}
                  preview={{ getContainer: () => document.getElementById(imageRenderDomID) as any }}
                  fallback={imageFallbackStr}
                />
              );
            })}
          </Carousel>
        ) : (
          <Image
            width={'100%'}
            height={imageHeight}
            src={''}
            preview={{
              getContainer: () => document.getElementById(imageRenderDomID) as any,
            }}
            fallback={imageFallbackStr}
          />
        )}

        {/* </Image.PreviewGroup> */}
      </Col>
      <Col span={4}>
        {imageStrList?.length > 1 && (
          <Button
            onClick={() => {
              carouselRef?.current?.next();
            }}
            type="dashed"
            shape="circle"
            icon={<DoubleRightOutlined />}
            disabled={carouselIndex == imageStrList?.length - 1}
            className="imageCarouselSty-rightBtn"
            onMouseOut={onMouseOutBtn}
          />
        )}
      </Col>
    </Row>
  );
};
